<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>group shopping</title>
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">

</head>

<body>
    <!-- <style>
        body {
    background-image: linear-gradient(to right top, #ffcc00 51%, #eee 49%);
    background-size:100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
    
}


body::after {
   
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: white;
    z-index: -1;
}
        
        
        
        </style> -->





    <div class="web">
        <!-- 头部 -->
        <header>
            <div class="logo_box">
                <img src="./images/logo.png" alt="">
                
            </div>
            <div class="search_box">
                <form action="">
                    <input type="text" placeholder="请输入商品名称" >
                    <button class="iconfont icon-glass"> </button>
                </form>


            </div>
            <div class="city_box">
                <select name="" id="">
                    <option value="">广州</option>
                    <option value="">深圳</option>
                    <option value="">杭州</option>
                    
                </select>
            </div>
        </header>





        <!-- 头部 -->




        <!-- 中部 -->


        <section>
            <div class="kv">
                <img src="./images/kv.jpg" alt="">
            </div>
            <div class="more">
                <div class="right">
                    <i class="iconfont icon-flower_SFontCN"
                    style="font-size:34px;"></i>
                    <span>优惠团购</span>
                </div>
                    <div class="left">

                    
                    <span>更多</span>
                    <div class="box">
                            
                            <i class="iconfont icon-youjiantou"
                            ></i>
                    </div>
                </div>
                    
            </div>

            <div class="type">
                <div class="row">
                    <img src="./images/index_01.jpg " 
                     alt="">
                    <img src="./images/index_02.jpg"  alt="">
                </div>
                <div class="row">
                        <img src="./images/index_03.jpg" alt="">
                        <img src="./images/index_04.jpg"  alt="">

                </div>
            </div>




            <div class="more">
                    <div class="right">
                        <i class="iconfont icon-flower_SFontCN"
                        style="font-size:34px;"></i>
                        <span>优惠团购</span>
                    </div>
                        <div class="left">
    
                        
                        <span>更多</span>
                        <div class="box">
                                
                                <i class="iconfont icon-youjiantou"
                                ></i>
                        </div>
                    </div>
                        
                </div>


                <div class="information">
                    <div class="first">
                        <div class="left">
                                <label for="search_web_control">
                                       
                                   
                            <img src="./images/index_05.jpg" alt="">
                        </label>
                        </div>



                        <div class="center">
                            <p>万岁寿司（正佳店）</p>
                            <p>
                                <span>[100店通用]</span>
                                <span>双人套餐</span>
                            </p>
                            <p> ￥88.00</p>
                        </div>

                        <div class="right">

                            <div class="text">
                                <p><100m</p>
                                <p>已售1000</p>
                            </div>

                        </div>
                    </div>

                    <div class="first">
                            <div class="left">
                                <img src="./images/index_06.jpg" alt="">
                            </div>
    
    
    
                            <div class="center">
                                <p>万岁寿司（正佳店）</p>
                                <p>
                                    <span>[100店通用]</span>
                                    <span>双人套餐</span>
                                </p>
                                <p> ￥88.00</p>
                            </div>
    
                            <div class="right">
    
                                <div class="text">
                                    <p><100m</p>
                                    <p>已售1000</p>
                                </div>
    
                            </div>
                        </div>

                </div>

                






        </section>



        <!-- 中部 -->





        <!-- 尾部 -->
      
  <footer>
        <!--ul.clearfix>(li.fl>a>i.iconfont.icon-xueshimao+p{首页})*5-->
        <div class="left_right">

 
        <ul class="clearfix">
            <li class="fl">
                <a class="active" href="index.html">
                    <i class="iconfont icon-zhuyexuanzhongicon07"
                    style="font-size:34px;"></i>
                    <p>首页</p>
                </a>
            </li>
            <li class="fl">
                <a href="type.html">
                        <i class="iconfont icon-fenlei-weixuanzhong"
                        style="font-size:34px;"></i>
                    <p>分类</p>
                </a>
            </li>
            <li class="fl">
                <a href="find.html">
                        <i class="iconfont icon-faxian"
                        style="font-size:34px;"></i>
                    <p>发现</p>
                </a>
            </li>
            <li class="fl">
                <a href="myself.html">
                        <i class="iconfont icon-yonghu"
                        style="font-size:34px;"></i>
                    <p>我的</p>
                </a>
            </li>
           
        </ul>

    </div>
    </footer>




        <!-- 尾部 -->

        <input type="checkbox" id="search_web_control" />
		<div class="search_web">
			
			

            <div class="web_2">




                    <header>
                        <div class="nav">
                                <label for="search_web_control">
                            <div class="back">
                                
                                <span>Back</span>
                            </div>
                        </label>
                            <span>产品详细</span>
                            <i class="iconfont icon-like"></i>
                        </div>
            
                    </header>
            
            
            
            
            
            
                    <section>
                        <div class="kv">
                            <img src="./images/detail1.jpg" alt="">
                        </div>
                        <div class="buy">
                            <span>￥32</span>
            
                            <div class="buy_bottom">
                                <span>购买</span>
                            </div>
                        </div>
            
            
                        <div class="comment">
                            <div class="left">
                                <i class="iconfont icon-like"></i>
                                <span>好评度</span>
                                <span>99% </span>
                            </div>
                            <div class="right">
                                <span>共605个评价> </span>
                            </div>
            
            
                        </div>
                        <div class="business">
                            <span> 适用商户</span>
                            <i class="iconfont icon-iconfontyoujiantou-copy-copy-copy-copy"></i>
                        </div>
            
            
                        <div class="template_box">
            
                            <div class="images">
                                <img src="./images/detail2.jpg" alt="">
                            </div>
                            <div class="center">
                                <p>万岁寿司（正佳店）</p>
                                <div class="discuss">
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <span>10分</span>
                                </div>
                                <p>离你100m</p>
                                <a href="">
                                    查看详情 >>
                                </a>
                            </div>
                            <div class="buttom">
                                <span>进入</span>
                            </div>
                        </div>
            
            
            
                        <div class="template_box">
            
                            <div class="images">
                                <img src="./images/detail3.jpg" alt="">
                            </div>
                            <div class="center">
                                <p>万岁寿司（正佳店）</p>
                                <div class="discuss">
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <span>10分</span>
                                </div>
                                <p>离你100m</p>
                                <a href="">
                                    查看详情 >>
                                </a>
                            </div>
                            <div class="buttom">
                                <span>进入</span>
                            </div>
                        </div>
                        <div class="template_box">
            
                            <div class="images">
                                <img src="./images/detail2.jpg" alt="">
                            </div>
                            <div class="center">
                                <p>万岁寿司（正佳店）</p>
                                <div class="discuss">
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <span>10分</span>
                                </div>
                                <p>离你100m</p>
                                <a href="">
                                    查看详情 >>
                                </a>
                            </div>
                            <div class="buttom">
                                <span>进入</span>
                            </div>
                        </div>
                        <div class="template_box">
            
                            <div class="images">
                                <img src="./images/detail2.jpg" alt="">
                            </div>
                            <div class="center">
                                <p>万岁寿司（正佳店）</p>
                                <div class="discuss">
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <span>10分</span>
                                </div>
                                <p>离你100m</p>
                                <a href="">
                                    查看详情 >>
                                </a>
                            </div>
                            <div class="buttom">
                                <span>进入</span>
                            </div>
                        </div>
                        <div class="template_box">
            
                            <div class="images">
                                <img src="./images/detail2.jpg" alt="">
                            </div>
                            <div class="center">
                                <p>万岁寿司（正佳店）</p>
                                <div class="discuss">
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <i class="iconfont icon-xingxingchengcopy"></i>
                                    <span>10分</span>
                                </div>
                                <p>离你100m</p>
                                <a href="">
                                    查看详情 >>
                                </a>
                            </div>
                            <div class="buttom">
                                <span>进入</span>
                            </div>
                        </div>
            
            
            
            
            
                    </section>
            
            
            
            
                </div>
		<!-- 搜索界面 




























    </div>


</body>

</html>